<template>
  <div class="dialog-form">
    <el-form ref="bannerRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="图片" prop="imageUrl">
        <image-upload v-model="form.imageUrl" :limit="1" :file-type="['jpg', 'jpeg', 'png', 'gif']" />
      </el-form-item>
      <el-form-item label="上下架时间" prop="effectiveTime">
        <el-date-picker clearable
          v-model="form.effectiveTime"
          :teleported="false"
          type="datetimerange"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="请选择上下架时间"
          :disabled-date="handleDisabledDate">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="优惠券" prop="couponId">
        <el-select v-model="form.couponId" placeholder="请选择优惠券">
          <el-option
            v-for="dict in couponList"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
            :disabled="dict.useState == 3"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="排序号" prop="sorts">
        <el-input-number v-model="form.sorts" :min="0" :precision="0" :step="1" placeholder="请输入排序号" />
      </el-form-item>
      <el-form-item label="状态">
        <el-switch
          v-model="form.status"
          :active-value="1"
          :inactive-value="2"
          inline-prompt
          active-text="启用"
          inactive-text="禁用"
        ></el-switch>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注" type="textarea" :rows="3" :maxlength="50" show-word-limit />
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onConfirm">确认</el-button>
    </div>
  </div>
</template>

<script setup>
import { getBanner, addBanner, updateBanner } from "@/api/banner/banner"
import { listCouponsDiscount } from "@/api/activity/coupon"
import EditBanner from './edit.vue'

const { proxy } = getCurrentInstance()

const emits = defineEmits(['cancel', 'confirm'])

const couponList = ref([])
const bannerRef = ref()
const form = ref({
  id: null,
  name: null,
  imageUrl: null,
  couponId: null,
  sorts: null,
  startTime: null,
  endTime: null,
  remark: null,
  status: 1,
  effectiveTime: [],
})
const rules = {
  name: [
    { required: true, message: "名称不能为空", trigger: "blur" }
  ],
  imageUrl: [
    { required: true, message: "请上传图片", trigger: "blur" }
  ],
  couponId: [
    { required: true, message: "请选择优惠券", trigger: "change" }
  ],
  sorts: [
    { required: true, message: "排序号不能为空", trigger: "blur" }
  ],
  effectiveTime: [
    { required: true, message: "请选择上下架时间", trigger: "blur" }
  ],
}

const pageInit = (id) => {
  getBanner(id).then(response => {
    form.value = response.data
    form.value.effectiveTime = [form.value.startTime, form.value.endTime]
    console.log(form.value.effectiveTime)
  })
}

/** 查询优惠劵列表 */
function getCouponList() {
  const params = {
    pageNum: 1,
    pageSize: 100,
    // useState: 4,              // 未开始、生效中
  }
  listCouponsDiscount(params).then(response => {
    couponList.value = response.rows
  })
}

const handleDisabledDate = (date) => {
  date = proxy.parseTime(date, '{y}-{m}-{d}')
  const currentDate = proxy.parseTime(new Date(), '{y}-{m}-{d}')
  return date < currentDate
}

const onCancel = () => {
  emits('cancel')
}

const onConfirm = () => {
  bannerRef.value.validate(valid => {
    if (valid) {
      let params = {
        ...form.value,
        startTime: form.value.effectiveTime[0],
        endTime: form.value.effectiveTime[1]
      }
      delete params.effectiveTime
      if (form.value.id) {
        updateBanner(params).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          emits('confirm')
        })
      } else {
        addBanner(params).then(response => {
          proxy.$modal.msgSuccess("添加成功")
          emits('confirm')
        })
      }
    }
  })
}

getCouponList()

defineExpose({
  pageInit
})

</script>

<style lang="scss" scoped>

</style>